<template>
    <div>
        <Modal width="360" title="快速转账" class="gameDlg" @on-cancel="closeDlg" v-model="showModal">
            <ul>
            <li>我的钱包
                <span>{{gameDlgData.money_usable}}</span>
            </li>
            <li>转入游戏
                <span>
                {{gameDlgData.game_money}}
                <span>（{{gameDlgData.game_name}}）</span>
                <img src="@/assets/images/home/sx@2x.png" alt="" class="sxImg" @click="sxGameMoney" :class="{loadSx: showLoad}">
                </span>
            </li>
            <li>转入金额
                <Input v-model="rechargeMoney" placeholder="点击输入" class="moneyInput"/>
            </li>
            </ul>
            <div class="moneyList">
            <div
                v-for="(item, index) in moneyList"
                :key="index"
                :class="{checked: checkedIndex==index}"
                @click="changeMoney(index)"
            >{{item}}</div>
            </div>
            <div slot="footer" class="gmFooter">
            <Button type="error" @click="tranMoeny" :loading="loadBtn1">确认</Button>
            <router-link to="/topUpCenter/recharge">
                <Button type="info" @click="closeDlg">去充值</Button>
            </router-link>
            <Button type="warning" @click="goGame(gameDlgData.game_flag)">直接进入游戏</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import { fetchJson } from "@/common/js/request";
import _ from "lodash";
import { mapGetters, mapActions } from "vuex";

export default {
  props: ["showGameBox", "gameDlgData"],
  beforeCreate() {},
  data() {
    return {
      showModal:false,
      moneyList: [10, 100, 500, 1000, 5000, "全部"],
      checkedIndex: -1,
      loading: false,
      isUser: JSON.parse(localStorage.getItem("isUser")),
      token: localStorage.getItem("token"),
      data: [],
      showGameDlg: false,
      rechargeMoney: null,
      loadBtn1: false,
      showLoad: false,
    };
  },
  created() {},
  mounted() {},
  computed: {
    ...mapGetters(["accountData"])
  },
  methods: {
    ...mapActions([
      'SET_ACCOUNT_DATA',
    ]),
    sxGameMoney(){
      this.SET_ACCOUNT_DATA({
        Obj: {}
      });
      this.showLoad=true
      setTimeout(()=>{
        this.showLoad=false
      },500)
    },
    tranMoeny() {
      let vm = this;
      if(vm.rechargeMoney==null||isNaN(vm.rechargeMoney)){
        vm.$Message.error({
          content: '请输入正确的金额'
        });
        return false
      }
      vm.loadBtn1 = true;
      let dataMess = {
        token: localStorage.getItem("token"),
        money: this.rechargeMoney,
        type: 1,
        game_plat_id: this.gameDlgData.game_plat_id
      };
      vm.$http
        .post(this.urlRequest + "?m=api&c=game&a=transfer", dataMess)
        .then(res => {
          res = res.data;
          vm.loadBtn1 = false;
          if (res.status == 0) {
            this.SET_ACCOUNT_DATA({
              Obj: {}
            });
            
            vm.$Message.success({
              content: res.ret_msg
            });
            vm.$http
              .post(
                this.urlRequest + "?m=api&c=game&a=getGamePlatForAmtLimit",
                dataMess
              )
              .then(res => {
                res = res.data;
                if (res.status == 0) {
                  this.cash = res.data.balance_usable;
                } else {
                  vm.$Message.error({
                    content: res.ret_msg
                  });
                }
              });
          } else {
            vm.$Message.error({
              content: res.ret_msg
            });
          }
        });
    },

    changeMoney(index) {
      this.checkedIndex = index;
      var checkedMoney = this.moneyList[index];
      if (checkedMoney == "全部") {
        this.rechargeMoney = this.accountData.money_usable;
      } else {
        this.rechargeMoney = checkedMoney;
      }
    },
    closeDlg(){
        this.$emit('changeGameDlg', false)
    },
    goGame(plat_flag) {
      this.$http
        .post(this.urlRequest + "?m=api&c=game&a=getGameUrl", {
          token: localStorage.getItem("token"),
          plat_flag: plat_flag
        })
        .then(res => {
          if (res.data.status == 0) {
            window.open(res.data.data.gameUrl);
          } else {
            this.$Message.warning(res.data.ret_msg);
          }
        });
    }
  },
  watch: {
    showGameBox:function(newVal){
        this.showModal=newVal
    },
    accountData:{
        handler(data){
            if(this.showModal){
                this.$emit('showGameFun',this.gameDlgData.game_flag, this.gameDlgData.game_name, this.gameDlgData.game_plat_id)
            }
        },
        deep:true
    }
  },
  beforeDestroy() {}
};
</script>
<style scoped>
@keyframes zhuanquan {
  0%{}
  100%{transform: rotate(360deg)}
}
.loadSx{animation: zhuanquan .5s forwards}
.sxImg{width: 20px;vertical-align: middle;cursor: pointer;}
.moneyInput {
  width: 200px;
  margin-left: 20px;
}
.gmFooter {
  display: flex;
  justify-content: space-around;
}
.gameDlg li {
  margin-bottom: 20px;
}
.gameDlg li > span {
  margin-left: 20px;
  color: #f3596a;
}
.gameDlg li > span > span {
  color: #666;
}
.moneyList {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  cursor: pointer;
}
.moneyList div {
  width: 50px;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  text-align: center;
  padding: 5px 0px;
  position: relative;
}
.moneyList .checked {
  border-color: #f3596a;
}
.moneyList .checked::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
}
</style>
<style>
</style>



// WEBPACK FOOTER //
// src/common/public/gameBoxDlg.vue